<template>
  <div class="c-auth-add">
    <el-button type="primary" @click="visible = true">
      {{ tplLang('btn_wsq_a', ['title_am_y']) }}
    </el-button>
    <c-dialog
      width="400px"
      :title="tplLang('btn_wsq_a', ['title_am_y'])"
      :visible.sync="visible"
      custom-class="c-auth-add-dialog"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        :validate-on-rule-change="false"
      >
        <el-form-item :label="multLang('title_name_w', ':')" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="multLang('text_d')"
          ></el-input>
        </el-form-item>

        <el-form-item :label="multLang('text_bd', ':')" prop="description">
          <c-input-text v-model="form.description"></c-input-text>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="close">
          {{ multLang('btn_cancel_a') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ multLang('btn_sure_a') }}
        </el-button>
      </template>
    </c-dialog>
  </div>
</template>
<script>
import { addAuthData } from '@/http/api/v1/auth'
export default {
  name: 'CAuthAdd',
  components: {},
  props: {},
  data() {
    return {
      visible: false,
      form: { name: '', description: '' }
    }
  },
  computed: {
    rules() {
      return {
        name: {
          required: true,
          message: this.tplLang('title_name_w', ['title_aah_f']),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    close() {
      this.$refs.form.resetFields()
      this.visible = false
      this.$emit('close')
    },
    submit() {
      this.$refs.form.validate(
        valid => valid && addAuthData({ ...this.form }).then(() => this.close())
      )
    }
  }
}
</script>
<style lang="scss">
.c-auth-add {
  display: inline-block;
  margin-right: 10px;
  &-dialog {
    height: 286px;
  }
}
</style>
